import { Button, Card } from "antd";
import React, { Component } from "react";
import ReactEcharts from "echarts-for-react";

//折线图
export default class Line extends Component {
  state = {
    sales: [5, 20, 36, 10, 10, 20], //销量
    stores: [3, 5, 30, 30, 10, 23], //库存
  };

  //更新图像
  update = () => {
    this.setState((state) => ({
      sales: state.sales.map((sale) => sale + 1),
      stores: state.stores.map((stor) => stor + 1),
    }));
  };

  //返回柱状图对象
  getOption = (sales, stores) => {
    return {
      title: {
        text: "入门",
      },
      tooltip: {},
      legend: {
        data: ["销量", "库存"],
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "line",
          data: sales,
        },
        {
          name: "库存",
          type: "line",
          data: stores,
        },
      ],
    };
  };
  render() {
    const { sales, stores } = this.state;
    return (
      <div>
        <Card>
          <Button type="primary" onClick={this.update}>
            更新
          </Button>
        </Card>
        <Card title="柱状图">
          <ReactEcharts option={this.getOption(sales, stores)} />
        </Card>
      </div>
    );
  }
}
